<template>
	<view class="index-page">
		<image class="bg-img" src="../../static/images/index/bg.png" mode=""></image>
		<view class="mask-box" v-show="isShowGZHTip">
			<uni-transition ref="ani" custom-class="transition" :mode-class="['fade', 'slide-top']" :show="isShowGZHTip">
				<view style="position: absolute;"
					:style="{
						top: `calc(${areaInfo.statusBarHeight}px + 1vh + ${menuButtonInfo.height}px)`, 
						right: `${menuButtonInfo.width / 7}px`}">
					<image :src="h5MiniAssets(pInfo.gif)" mode="widthFix" style="width: 270px;height: 304px;">
					</image>
					<view @click="isShowGZHTip = false" class=""
						style="position: absolute;width: 90%;bottom: 5%; right: 5%;height: 16%;">
					</view>
				</view>
			</uni-transition>
		</view>
		<view class="body">
			<u-navbar class="header" style="height: 8.5vh" :is-back="false" z-index="90"
				:background="{backgroundImage:`url(${h5MiniAssets('/index/bg.png')})`, backgroundSize: '100% auto'}">
				<view class="flex items-center status_bar" style="padding: 0 26rpx;position: relative;">
					<!-- <image :src="pInfo.logo" mode="heightFix" style="height: 58rpx;width: 58rpx;margin-right: 14rpx;">
					</image> -->
					<!-- <image src="../../static/images/logo-text.png" mode="heightFix" style="height: 34rpx;"></image> -->
					<!-- <text style="font-size: 34rpx;font-weight: bold;line-height: 40rpx;">{{pInfo.name}}</text> -->

					<view class="flex items-center" :style="{right: `30vw`}"
						style="position: absolute; height: 100%;">
						<view class="" @tap="isShowGZHTip = true"
							style="border: 1px solid #bdbdbddd;border-radius: 999px;font-size: 28rpx;padding: 8rpx 26rpx;margin-bottom: 4rpx;">
							+小程序
						</view>
					</view>
					<view v-if="isShowTips" :style="{right: `${menuButtonInfo.width - 67}px`, top: `calc(${menuButtonInfo.height}px + 1.5vh)`, }"
						style="position: absolute;">
						<image src="/static/images/index/tips.png" mode="widthFix"
							style="width: 170px;height: 46.4px;">
						</image>
						<view @click="isShowTips = false" class=""
							style="position: absolute;width: 50rpx;bottom: 19rpx; right: 0;height: 50rpx;">
						</view>
					</view>
				</view>
			</u-navbar>
			<!-- <view class="title">
				首页
			</view> -->
			<!-- <view class="tips">
				<view class="tips-box">
					<image style="width: 40rpx;height: 40rpx;margin-right: 8rpx;"
						src="../../static/images/index/avatar.png" mode=""></image>
					<view class="tips-text">恭喜冯先生成功预约<span style="color: #1277FF;">3000元</span></view>
				</view>
			</view> -->
			<view class="foldable-text">
				<image style="width: 40rpx;height: 40rpx;margin-right: 8rpx;"
					src="../../static/images/index/icon-notifiy.png" mode=""></image>
				<view :style="{
			        maxHeight: expanded ? 'none' : '22px', 
			        overflow: expanded ? 'visible' : 'hidden',
					whiteSpace: expanded ? 'wrap' : 'nowrap',
			      }" class="text-content" @click="openContactDialogRef">
					{{ msg }}
				</view>
				<view @click="toggleExpand" class="expand-img">
					<image :style="{transform: expanded ? 'rotate(180deg)' : ''}"
						style="transition: all 0.5s; width: 16rpx;height: 16rpx;"
						src="../../static/images/index/icon-down.png" mode="">
					</image>
				</view>
			</view>
			<view class="info">
				<view class="info-head-box">
					<image class="head-box-bg" src="../../static/images/index/info-box-bg.png" mode=""></image>
					<view class="box-head-text">
						借款金额
					</view>
					<view class="box-body">
						<view class="box-body-left">
							<image class="box-body-left-bg" src="../../static/images/index/input-bg.png" mode="">
							</image>
							¥<input @blur="inputBlur(money)" maxlength="6" class="box-body-left-input" v-model="money"
								type="text" />
						</view>
						<view @click="allMoney" class="box-body-right">
							全部借出50000元
						</view>
					</view>
					<view class="box-footer">
						<text class="box-footer-left">
							<text style="opacity: 0.7;">总额度</text> 50000，<text style="opacity: 0.7;">临时额度</text>7000
						</text>
						<image @click="isShowCardTips = !isShowCardTips"
							style="width: 32rpx;height: 32rpx;margin-left: 8rpx;"
							src="../../static/images/index/icon-tips.png" mode=""></image>
						<view v-if="isShowCardTips" class="box-footer-right">
							<image class="box-footer-right-bg" src="../../static/images/index/info-box-msg.png" mode="">
							</image>
							剩余2小时额度失效
						</view>
					</view>
				</view>
			</view>
			<view class="calculation-box">
				<view class="calculation-box-head">
					<image style="height: 30rpx;width: 128rpx;" src="../../static/images/hkqs.png" mode=""></image>
				</view>
				<view class="calculation-box-body">
					<uv-tabs :itemStyle="{ height: '58rpx' }" :current="tabCurrent" :list="tabList"
						@change="tabChange"></uv-tabs>
					<view class="calculation-box-body-info">
						<view @click="openStepPopup" class="calculation-info-row">
							<view class="">
								还款计划
							</view>
							<view style="display: flex;align-items: center;">
								首期{{ fristInterest.time }} 应还款{{ fristInterest.money }}元<image
									style="width: 32rpx;height: 32rpx;" src="../../static/images/index/icon-goto.png"
									mode=""></image>
							</view>
						</view>
						<view class="calculation-info-row">
							<view class="">
								还款方式
							</view>
							<view class="">
								<span class="calculation-info-tips" style="margin-right: 8rpx;">*每日计算，提前还款0利息</span>随借随还
							</view>
						</view>
						<view class="calculation-info-row">
							<view class="">
								到账时间
							</view>
							<view class="">
								最快1小时
							</view>
						</view>
						<view style="margin-top: 24rpx;">
							<view class="calculation-info-tips">*参考日利率:0.02%起(年化7.2%-24%）</view>
							<view class="calculation-info-tips">*具体额度利率以实际审核为准</view>
						</view>
					</view>
				</view>
			</view>
			<view class="card-box" :class="[isPhoneLogin ? 'card-box-phone' : '']">
				<template v-if="isPhoneLogin">
					<view class="" style="text-align: left;color: #222; ">
						<view class="flex items-center justify-between">
							<view class="flex items-center" style="flex:1;width: 200rpx;">
								<input @focus="inputFocus" @blur="blurFocus" class="form-input" :cursor-spacing="120" maxlength="11" v-model="phone" type="number"
									style="flex: 1;width: 140rpx;" placeholder="输入手机号 (已加密）" />
							</view>
						</view>
						<button style="margin-top: 40rpx;" class="btn-nostyle button animation-btn"
							@click="openVerificationCode">
							去提现
						</button>
						<!-- <div class="pointer" style="top: 60%;">
							<div class="white-point">
								<div class="white-point-in"></div>
							</div>
							<img src="../../static/images/index/pointer.png"
								style="display: block; width: 45px;height: 37px;" />
						</div> -->
					</view>
				</template>
				<template v-else>
					<button @click="btnTaphandler" class="btn-nostyle button animation-btn" open-type="getPhoneNumber"
						@getphonenumber="submit">
						去提现
					</button>
					<!-- <div class="pointer" style="top: 30%;">
						<div class="white-point">
							<div class="white-point-in"></div>
						</div>
						<img src="../../static/images/index/pointer.png"
							style="display: block; width: 45px;height: 37px;" />
					</div> -->
				</template>

				<view class="flex items-center justify-center"
					style="margin-top: 24rpx;padding: 0 20rpx;">
					<view :class="{ shake: isShaking }" v-if="!isAgree" @click="isAgree = true" class=""
						style="display: flex;justify-content: center; align-items: center;margin-right: 6rpx;margin-top: 2px;">
						<image src="/static/images/no-select.png" style="width: 30rpx;height: 30rpx;" mode=""></image>
					</view>
					<view v-else class="" @click="isAgree = false"
						style="display: flex;justify-content: center; align-items: center;color: #1277FF; margin-right: 6rpx;margin-top: 2px;">
						<image src="/static/images/ok-select.png" style="width: 30rpx;height: 30rpx;" mode=""></image>
					</view>
					<text style="margin-top: 4rpx; font-size: 24rpx; color: #666;text-align: center;"><text
							@click="isAgree = true">我已同意并阅读</text><text @click="useProtocolLink().toPrivacyPolicy()"
							style="color: #1277FF;">《隐私政策》</text> <text
							@click="useProtocolLink().toUserServicesAgreement()"
							style="color: #1277FF;">《用户服务协议》</text></text>
				</view>
			</view>
			<view style="padding: 0 24rpx; margin-bottom: 64rpx;">
				<view style="color: #B2B6BB;text-align: center; font-size: 20rpx; line-height: 28rpx;">
					<view style="margin-top: 14rpx;">
						{{pInfo.tips}}
					</view>
					<view style="margin-top: 14rpx;">
						理性借贷，避免逾期</view>
					<view>
						合理安排资金，珍惜个人信用
					</view>
					<view style="margin-top: 14rpx;">
						{{ pInfo.copyright }}
					</view>
					<!-- <view>
						{{ pInfo.icp }}
					</view> -->
					<view>
						{{ '25.3.22' }}
					</view>
				</view>
			</view>
			<view style="height: 200rpx;">

			</view>
		</view>
		<view class="gzhxfc" @click="gzgzhHandler" v-if="gzhPageJumpInfo && !isgzhPageJumpInfoClose && !isFocus">
			<view class="flex items-center flex-1" style="width: 100rpx;">
				<view class="gzhlogo" :style="{backgroundImage: `url(${gzhPageJumpInfo.gzhLogo})`}">
		
				</view>
				<view class="">
					<view class="items-center" style="font-size: 34rpx; font-weight: bold;display: flex;">
						<view class="" style="margin-right: 8rpx;">
							借钱额度审核通知
						</view>
						<view
							style="font-size: 26rpx;font-weight: 400; border: 2rpx solid #fff;opacity: 0.7; border-radius: 12rpx; padding: 6rpx 10rpx; line-height: 1;">
							公众号
						</view>
					</view>
					<view class="" style="font-size: 26rpx;margin-top: 8rpx;opacity: 0.7;">
						关注公众号了解额度调整最新动态
					</view>
				</view>
		
			</view>
			<view class=""
				style="background-color: #4F87F9;color: #fff; padding: 10rpx 48rpx; border-radius: 99999rpx;">
				关注
			</view>
		
			<view class="close" @click.stop="isgzhPageJumpInfoClose = true">
				<image src="../../static/images/close-white.png" mode="widthFix" style="width: 40rpx; height: 40rpx;">
				</image>
			</view>
		</view>
		<verificationCode ref="verificationCodeRef" @getCode="getCode" @onComplete="codeComplete"></verificationCode>
		<stepPopup ref="stepPopupRef"></stepPopup>
		<a-contact-dialog ref="aContactDialogRef"></a-contact-dialog>
	</view>

</template>

<script>
	import {
		loginApi,
		sendSmsCodeApi,
		getTokenApi
	} from '../../api/user'
	import {
		gzhPageJumpInfoApi,
		getConfigApi
	} from '../../api/config'
	import {
		h5Url,
		h5MiniAssets,
		productInfo
	} from '../../configs/env.config'
	import {
		useProtocolLink
	} from '../../configs/protocol_link'
	import {
		getChannelCode
	} from '../../utils/request'
	import verificationCode from './components/verificationCode.vue'
	import stepPopup from './components/stepPopup.vue'
	import dayjs from 'dayjs'
	import {
		calculateInterest,
		divideAndRound
	} from '../../utils/calculate.js'
	export default {
		components: {
			verificationCode,
			stepPopup,
		},
		data() {
			return {
				title: 'Hello',
				isAgree: false,
				appVersion: '',
				gzhPageJumpInfo: undefined,
				isgzhPageJumpInfoClose: false,
				isPhoneLogin: false,
				phone: '',
				code: '',
				time: 0,
				interval: 0,
				isShowTips: true,
				isShowGZHTip: false,
				money: 2000,
				isShowCardTips: false,
				expanded: false, // 状态：是否展开
				msg: '',
				tabCurrent: 2,
				//rate年化利率
				tabList: [{
					name: '36期',
					value: 36,
					rate: 7.34
				}, {
					name: '24期',
					value: 24,
					rate: 7.34
				}, {
					name: '12期',
					value: 12,
					rate: 7.34
				}, {
					name: '6期',
					value: 6,
					rate: 7.34
				}, {
					name: '3期',
					value: 3,
					rate: 7.34
				}],
				tabInfo: {
					value: 12,
					rate: 7.34
				},
				isShaking: false,
				menuButtonInfo: {},
				areaInfo: {
					safeArea: {}
				},
				isFocus: false
			}
		},
		onLoad() {
			this.areaInfo = uni.getWindowInfo()
			this.menuButtonInfo = wx.getMenuButtonBoundingClientRect()
			console.log(this.areaInfo, this.menuButtonInfo)
			this.initData();
			
			// this.openContactDialogRef();
			setTimeout(() => {
				this.isShowTips = false
				this.$nextTick(() => {
					this.checkToken()
				})
			}, 1000)
		},
		computed: {
			pInfo() {
				return productInfo
			},
			fristInterest() {
				const everyMoney = divideAndRound(this.money, this.tabInfo.value)
				const interest = calculateInterest(this.money, this.tabInfo.value, this.tabInfo.rate, 1);
				return {
					time: dayjs(dayjs().add(1, 'M')).format("MM月DD日"),
					money: (everyMoney + interest).toFixed(2),
				}
			}
		},
		methods: {
			h5MiniAssets,
			useProtocolLink,
			inputFocus(){
				this.isFocus = true;
			},
			blurFocus(){
				this.isFocus = false;
			},
			async getConfigMsg() {
				const res = await getConfigApi({
					id: 5
				})
				this.msg = res.data.contentInfo
			},
			tabChange(info) {
				this.tabInfo = {
					rate: info.rate,
					value: info.value,
				}
				console.log(info)
			},
			inputBlur() {
				if (this.money >= 50000) {
					this.money = 50000
				}
			},
			//打开联系客服
			openContactDialogRef() {
				this.$refs.aContactDialogRef.open()
			},
			//打开还款计划
			openStepPopup() {
				this.$refs.stepPopupRef.open({
					...this.tabInfo,
					money: this.money,
				});
			},
			//全部金额
			allMoney() {
				this.money = 50000
			},
			toggleExpand() {
				this.expanded = !this.expanded; // 切换状态
			},
			// 协议是否同意改变事件
			argementChange(val) {
				this.ischeckArg = !!(val.detail.value[0]);
			},
			triggerShake() {
				if (this.isShaking) return;
				this.isShaking = true;
				setTimeout(() => {
					this.isShaking = false;
				}, 500);
			},
			async initData() {
				const res = await uni.getSystemInfo()
				const appVersion = res.appVersion
				this.getConfigMsg()
				// #ifdef MP-WEIXIN
				const {
					miniProgram
				} = wx.getAccountInfoSync()
				this.appVersion = miniProgram.version || appVersion
				// #endif
				if (!this.appVersion) this.appVersion = appVersion
				this.initConfigData()
			},
			async checkToken(){
				const token = uni.getStorageSync('token')
				if(token){
					const channelCode = await getChannelCode()
					const res = await getTokenApi({
						token: token
					})
					if(res.data.result){
						this.gotoWebview(token, channelCode)
						return
					}
				}
				uni.clearStorageSync()
			},
			codeComplete(str) {
				this.code = str
				this.phoneLogin()
			},
			async openVerificationCode() {
				if (!this.phone) {
					return uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
				}
				if (!/^[1][2,3,4,5,6,7,8,9][0-9]{9}$/.test(this.phone)) {
					return uni.showToast({
						title: '手机号格式不正确',
						icon: 'none'
					})
				}
				this.isAgree = true
				// if (!this.isAgree) {
				// 	this.triggerShake()
				// 	return uni.showToast({
				// 		title: '请先同意协议',
				// 		icon: 'none'
				// 	})
				// }
				this.$refs.verificationCodeRef.open(this.phone)
			},
			getCode() {
				getChannelCode()
			},
			async phoneLogin() {
				if (!this.code) {
					return uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					})
				}
				uni.showLoading()
				const res = await loginApi({
					loginType: 0,
					mobile: this.phone,
					loginCode: this.code
				}).catch(e => {
					console.log()
					return uni.showToast({
						title: e.message || '请求错误',
						icon: 'none'
					})
					return Promise.reject(e)
				}).finally(() => {
					uni.hideLoading()
				})
				console.log(res)
				if (!res.data?.token) {
					return
					// return uni.showToast({
					// 	title: '验证码错误',
					// 	icon: 'none'
					// })
				}
				const channelCode = await getChannelCode()
				this.$refs.verificationCodeRef.close();
				this.gotoWebview(res.data.token, channelCode);
				this.$emit('close')
			},
			async getCode() {
				if (this.time > 0) return;
				if (!this.phone) {
					return uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
				}
				if (!/^[1][2,3,4,5,6,7,8,9][0-9]{9}$/.test(this.phone)) {
					return uni.showToast({
						title: '手机号格式不正确',
						icon: 'none'
					})
				}
				uni.showLoading()
				await sendSmsCodeApi({
					oType: 0,
					mobile: this.phone,
				})
				uni.hideLoading()
				this.time = 60
				this.interval = setInterval(() => {
					if (--this.time <= 0) clearInterval(this.interval)
				}, 1000)
			},
			async submit(e) {
				uni.hideLoading()
				console.log(e)
				console.log(e.detail.code) // 动态令牌
				console.log(e.detail.errMsg) // 回调信息（成功失败都会返回）
				console.log(e.detail.errno) // 错误码（失败时返回）
				
				if (e.type !== 'getphonenumber') return;
				if (e.detail.errMsg !== 'getPhoneNumber:ok') {
					console.log('用户拒绝了')
					this.isPhoneLogin = true
					// const h5UrlHandler = `${h5Url}/?ch=${channelCode}&deviceId=${uni.getDeviceInfo().deviceId}`

					// uni.navigateTo({
					// 	url: `/pages/webview/webview?url=${encodeURIComponent(h5UrlHandler)}`
					// })
					// this.$emit('close')
					return;
				}
				const mobileCode = e.detail.code;
				uni.showLoading()
				const channelCode = await getChannelCode()
				const loginCode = await this.loginCodeGet()
				const res = await loginApi({
					loginType: 8,
					mobile: mobileCode,
					loginCode: loginCode
				})
				this.gotoWebview(res.data.token, channelCode)
			},
			gotoWebview(token, channelCode){
				const h5UrlHandler =
					`${h5Url}/?ch=${channelCode}&deviceId=${uni.getDeviceInfo().deviceId}&token=${token}&pn=${this.pInfo.pName}`
				uni.setStorageSync('token', token)
				uni.navigateTo({
					url: `/pages/webview/webview?url=${encodeURIComponent(h5UrlHandler)}`
				})
				uni.hideLoading()
			},
			loginCodeGet() {
				return new Promise((resolve, reject) => {
					uni.login({
						provider: 'weixin', //使用微信登录
						success: function(loginRes) {
							resolve(loginRes.code)
						},
						fail: reject
					})
				})
			},
			btnTaphandler() {
				this.isAgree = true
				uni.showLoading()
			},
			async initConfigData() {
				const res = await gzhPageJumpInfoApi()
				this.gzhPageJumpInfo = res.data
			},
			gzgzhHandler() {
				uni.navigateTo({
					url: `/pages/gzh/gzh`
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		width: 100%;
		overflow-x: hidden;
	}

	.mask-box {
		background-color: rgba(0, 0, 0, 0.3);
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 2;
	}

	.gzhxfc {
		position: fixed;
		width: 95%;
		left: 2.5%;
		box-sizing: border-box;
		bottom: 60rpx;
		background-color: #464748;
		display: flex;
		color: #fff;
		align-items: center;
		padding: 30rpx 30rpx;
		border-radius: 16rpx;
		z-index: 10;
		box-shadow: 0px 10px 15px -3px rgba(125, 125, 125, .4);

		.gzhlogo {
			width: 70rpx;
			min-width: 70rpx;
			height: 70rpx;
			background-repeat: no-repeat;
			background-size: cover;
			background-position: center center;
			border-radius: 14rpx;
			margin-right: 18rpx;
		}

		.close {
			position: absolute;
			right: -15rpx;
			top: -15rpx;
			background-color: red;
			border-radius: 9999rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.pointer {
		position: absolute;
		right: calc(28% - 28px);
		z-index: 1;

		img {
			position: relative;
			z-index: 1;
			animation: scale-anm 2s infinite;
		}

		.white-point {
			position: absolute;
			z-index: 0;
			background-color: rgba($color: #fff, $alpha: 0.2);
			border-radius: 9999px;
			$side: 18px;
			left: calc(-1 * $side / 2 + 1px);
			top: calc(-1 * $side / 2 + 3px);
			width: $side;
			height: $side;
			display: grid;
			place-content: center;

			.white-point-in {
				background-color: rgba($color: #fff, $alpha: 1);
				border-radius: 9999px;
				$side-in: 8px;
				width: $side-in;
				height: $side-in;
			}
		}
	}

	.scale-anm {
		animation: scale-anm 2s 2;
	}

	@keyframes scale-anm {
		0% {
			transform: scale(1);
		}

		25% {
			transform: scale(1.2);
		}

		50% {
			transform: scale(1);
		}

		75% {
			transform: scale(1.2);
		}

		100% {
			transform: scale(1);
		}
	}

	/* 抖动动画 */
	@keyframes shake {
		0% {
			transform: translate(0, 0);
		}

		10% {
			transform: translate(-5px, -2px);
		}

		20% {
			transform: translate(5px, 2px);
		}

		30% {
			transform: translate(-5px, -2px);
		}

		40% {
			transform: translate(5px, 2px);
		}

		50% {
			transform: translate(-5px, -2px);
		}

		60% {
			transform: translate(5px, 2px);
		}

		70% {
			transform: translate(-5px, -2px);
		}

		80% {
			transform: translate(5px, 2px);
		}

		90% {
			transform: translate(-5px, -2px);
		}

		100% {
			transform: translate(0, 0);
		}
	}

	/* 动态添加的抖动类 */
	.shake {
		animation: shake 0.5s ease;
	}

	.index-page {
		box-sizing: border-box;
		padding-top: var(--status-bar-height);
		position: relative;
		background-color: #e7f0fb;
		min-height: 100vh;
		display: flex;

		.calculation-box {
			margin: 0 24rpx 24rpx 24rpx;
			background-color: #f4faff;
			border-radius: 40rpx;
			overflow: hidden;
			display: flex;
			flex-direction: column;

			&-head {
				display: flex;
				height: 80rpx;
				justify-content: center;
				align-items: center;
			}

			&-body {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				background-color: #fff;
				padding: 24rpx 32rpx;
				display: flex;

				.calculation-info-row {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 28rpx;
					padding: 32rpx 0;
					border-bottom: 2rpx solid #F1F1F1;
				}

				.calculation-info-tips {
					color: #999999;
					font-size: 24rpx;
				}

				&-info {
					margin-top: 8rpx;
					width: 100%;
				}
			}
		}

		.card-box-phone {
			background-color: #fff;
			margin: 24rpx;
			padding: 32rpx 32rpx 24rpx 32rpx;
			border-radius: 40rpx;

			.form-input {
				height: 104rpx;
				background-color: #f4f6f9;
				border-radius: 9999px;
				padding: 0 20px;
				font-weight: 900;

				&::placeholder {
					color: #999999;
				}
			}
		}

		.card-box {
			text-align: center;
			color: #fff;
			position: relative;

			.button {
				width: 640rpx;
				height: 104rpx;
				margin: auto;
				background-color: #1277FF;
				color: #fff;
				border-radius: 999999px;
				padding: 26rpx;
				font-size: 36rpx;
				font-weight: 500;
			}
		}

		.bg-img {
			position: absolute;
			width: 100%;
			height: 742rpx;
			top: 0;
			z-index: 0;
		}

		.info {
			padding: 26rpx 24rpx;

			&-head-box {
				position: relative;
				padding: 40rpx 16rpx 28rpx 40rpx;
				color: #fff;
				display: flex;
				flex-direction: column;

				.box-footer {
					display: flex;
					align-items: center;
					// justify-content: space-between;
					margin-top: 28rpx;
					font-size: 28rpx;

					height: 54rpx;

					&-left {
						// display: flex;
						font-size: 28rpx;
						opacity: 1;
					}

					&-right {
						width: 230rpx;
						height: 48rpx;
						font-size: 24rpx;
						position: relative;
						color: #666666;
						font-size: 24rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						&-bg {
							z-index: -1;
							position: absolute;
							width: 230rpx;
							height: 48rpx;
							top: 0;
						}
					}
				}

				.box-body {
					display: flex;
					justify-content: space-between;
					align-items: center;

					&-left {
						display: flex;
						align-items: center;
						font-size: 80rpx;
						height: 110rpx;
						position: relative;

						&-input {
							height: 100%;
						}

						&-bg {
							z-index: -1;
							position: absolute;
							width: 312rpx;
							height: 112rpx;
						}
					}

					&-right {
						flex: none;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-right: 22rpx;
						height: 74rpx;
						width: 274rpx;
						border-radius: 38rpx;
						border: 1px solid #fff;
						font-size: 28rpx;
					}
				}

				.box-head-text {
					font-size: 28rpx;
					margin-bottom: 26rpx;
				}

				.head-box-bg {
					top: 0;
					left: 0;
					position: absolute;
					width: 100%;
					height: 100%;
					z-index: -1;
				}
			}
		}

		.body {
			position: relative;
			z-index: 1;
			width: 100%;
			display: flex;
			flex-direction: column;

			.foldable-text {
				box-sizing: content-box;
				display: flex;
				justify-content: space-between;
				background-color: #fff;
				padding: 8rpx 24rpx;
				// margin-top: 34rpx;

				.expand-img {
					width: 40rpx;
					height: 40rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.text-content {
					width: 85%;
					line-height: 24rpx;
					font-size: 24rpx;
					text-overflow: ellipsis;
					color: #1277FF;
					margin-top: 10rpx;
				}
			}


			.title {
				font-size: 17px;
				font-weight: 600;
				display: flex;
				justify-content: center;
				margin-top: 20px;
			}

			.tips {
				width: 100%;
				margin-top: 18px;
				display: flex;
				justify-content: flex-end;

				.tips-text {
					font-size: 20rpx;
					color: #222222;
				}

				&-box {
					display: flex;
					align-items: center;
					width: 332rpx;
					border-radius: 15px 0px 0px 15px;
					background: linear-gradient(to top, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.40));
					padding: 10rpx 12rpx;
				}
			}
		}
	}
</style>